<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="公共配置" name="1">
        <!--公共属性-->
        <div class="pad-lft-rgt-10">
          <div class="flex-com mar-btm">
            <span class="label-title">模式</span>
            <el-select v-model="widget.UI.data.mode" placeholder="请选择模式" class="width-100" size="mini"  @change="(val)=>modeChange(val,'mode')">
              <el-option label="图片" value="image"></el-option>
              <el-option label="视频" value="video"></el-option>
            </el-select>
          </div>
          <div class="flex-com mar-btm" v-if="widget.UI.data.mode==='image'">
            <span class="label-title">时间(s)</span>
            <el-input-number v-model="widget.UI.data.playInterval" placeholder="请设置轮播时间" size="mini"
                             class="width-100"></el-input-number>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="本地图片配置" name="2" v-if="widget.UI.data.mode==='image'">
        <!--信号源属性-->
        <div class="pad-lft-rgt-10">
          <div class="inputs-item" v-for="(item, index) in  widget.UI.data.localImageList" :key="index">
            <div class="flex-com mar-btm">
              <span class="label-title">图片{{index + 1}}</span>
              <el-image
                class="local-img"
                :src="`${assetBaseUrl}/file/download/${item}`"
                fit="fill"></el-image>
              <span class="cursor-pointer font-color-primary" @click="chooseLocalImg(item,index)">选择图片</span>
              <span class="el-icon-delete cursor-pointer" @click="deleteLocalImg(index)"></span>
            </div>

            <div class="divider"></div>
          </div>
          <div class="font-color-primary font-size-12 font-weight-bold">
            <div class="display-inline cursor-pointer" @click="addLocalImg">
              <i class="iconfont icon-tianjia"></i><span class="mar-lft-5">添加本地图片</span>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="网络图片配置" name="3" v-if="widget.UI.data.mode==='image'">
        <!--显示源属性-->
        <div class="pad-lft-rgt-10">
          <div class="inputs-item" v-for="(item, index) in  widget.UI.data.netImageList" :key="index">
            <div class="flex-com mar-btm">
              <span class="label-title">图片地址</span>
              <el-input :value="item" placeholder="请输入图片地址" size="mini"
                        class="width-100" @input="updateItem($event, index)"></el-input>
              <span class="el-icon-delete cursor-pointer" @click="deleteNetImg(index)"></span>
            </div>

            <div class="divider"></div>
          </div>
          <div class="font-color-primary font-size-12 font-weight-bold">
            <div class="display-inline cursor-pointer" @click="addNetImg">
              <i class="iconfont icon-tianjia"></i><span class="mar-lft-5">添加网络图片</span>
            </div>
          </div>
        </div>
      </el-collapse-item>
      <el-collapse-item title="网络视频配置" name="4" v-if="widget.UI.data.mode==='video'">
        <!--显示源属性-->
        <div class="pad-lft-rgt-10">
          <div class="inputs-item" v-for="(item, index) in  widget.UI.data.netVideoList" :key="index">
            <div class="flex-com mar-btm">
              <span class="label-title">图片地址</span>
              <el-input :value="item" placeholder="请输入图片地址" size="mini"
                        class="width-100" @input="updateVideoItem($event, index)"></el-input>
              <span class="el-icon-delete cursor-pointer" @click="deleteNetVideo(index)"></span>
            </div>

            <div class="divider"></div>
          </div>
          <div class="font-color-primary font-size-12 font-weight-bold">
            <div class="display-inline cursor-pointer" @click="addNetVideo">
              <i class="iconfont icon-tianjia"></i><span class="mar-lft-5">添加网络视频</span>
            </div>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-dialog
      title="选择图片"
      :visible.sync="chooseLocalImgDialog"
      :close-on-click-modal="false"
      width="500px"
      center>
      <ImagePicker
        v-model="currentLocalImg"></ImagePicker>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog" size="small">取 消</el-button>
        <el-button type="primary" @click="submit" size="small">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>>
<script>
  import CustomColorPicker from '@/components/IDE/colorPicker/Color.vue';
  import {Carousel} from "@/modules/IDE/widget/custom/carousel";
  import ImagePicker from "@/components/IDE/ImagePicker";
  import {assetBaseUrl} from "@/config/env";

  export default {
    name: 'CarouselSpec',
    components: {
      CustomColorPicker, ImagePicker
    },
    props: {
      widget: {
        type: Carousel,
        default: () => {
          return {};
        }
      }
    },
    data() {
      return {
        activeNames: ['1'],
        chooseLocalImgDialog: false,
        currentLocalImg: '',
        currentLocalImgIndex: 0,
        assetBaseUrl: assetBaseUrl
      }
    },
    computed: {
      state() {
        return this.widget.getCurrentState();
      },
    },
    methods: {
      updateItem(value, index) {
        this.$set(this.widget.UI.data.netImageList, index, value);//触发走马灯的computed
        this.$forceUpdate()
      },
      updateVideoItem(value, index) {
        this.$set(this.widget.UI.data.netVideoList, index, value);//触发走马灯的computed
        this.$forceUpdate()
      },
      addLocalImg() {
        this.widget.UI.data.localImageList.push('');
      },
      addNetImg() {
        this.widget.UI.data.netImageList.push('https://');
      },
      addNetVideo() {
        this.widget.UI.data.netVideoList.push('https://');
      },
      deleteLocalImg(idx) {
        this.widget.UI.data.localImageList.splice(idx, 1)
      },
      deleteNetImg(idx) {
        this.widget.UI.data.netImageList.splice(idx, 1)
      },
      deleteNetVideo(idx) {
        this.widget.UI.data.netVideoList.splice(idx, 1)
      },
      chooseLocalImg(item, idx) {
        this.currentLocalImg = item
        this.currentLocalImgIndex = idx
        this.chooseLocalImgDialog = true
      },
      cancelDialog() {
        this.currentLocalImg = ''
        this.chooseLocalImgDialog = false
      },
      submit() {
        this.$set(this.widget.UI.data.localImageList, this.currentLocalImgIndex, this.currentLocalImg);//触发走马灯的computed
        // this.widget.UI.data.localImageList[this.currentLocalImgIndex] =    this.currentLocalImg;
        this.chooseLocalImgDialog = false
        this.$forceUpdate()
      },
      modeChange(val,category) {
        const {ports = {}} = this.widget;
        const {values = []} = ports;
        const visiblePort = values.find(val => val.key === category) || {};
        visiblePort.value = val;
      },
    }
  }
</script>
<style lang="less" scoped>
  .flex-com {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .label-title {
    display: inline-block;
    min-width: 56px;
    color: @colorGray10;
    font-size: 14px;
    margin-right: 5px;
  }

  .addAction {
    color: #2d69e0;
    font-size: 14px;
  }

  .local-img {
    width: 60px;
    height: 60px;
  }

  .divider {
    height: 2px;
    background: #eee;
    margin: 10px 0;
  }
</style>
